<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box,#box2{
            width: 200px;margin: 100px auto}
        *{margin: 0; padding: 0;}
        ul{
            width: 200px;margin:10px 0;}
        li{list-style: none;
            width: 200px;
            height: 200px;background-color: #ccc;display: none  }
        li:nth-child(1){
            display: block;}
        li:nth-child(2){background-color: green}
        li:nth-child(4){background-color: green}
        #box2 ul li{
            width: 300px;
            height: 300px;background-color: #ccc;display: none;}

    </style>
    <script>
        window.onload=function () {
            function tab(box,obj,obj2){
                var oBox=document.getElementById(box.trim());
                var aInt=oBox.getElementsByTagName(obj.trim());
                var aLi=oBox.getElementsByTagName(obj2.trim());
                for (var i=0;i<aLi.length;i++){
                    (function (i) {
                        aInt[i].onclick=function(){
                            for (var j=0;j<aLi.length;j++){
                                aInt[j].style.backgroundColor="";
                                aLi[j].style.display='none';
                            }
                            this.style.backgroundColor="green";
                            aLi[i].style.display='block ';
                        }
                    })(i)
                }
            };
            tab("box","input","li ");
            tab("box2","span","li");
        }
    </script> .

</head>
<body>
<div id="box">
    <input type="button" value="111">
    <input type="button" value="222">
    <input type="button" value="333">
    <input type="button" value="444">
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
</div>

<div id="box2">
    <span>111</span>
    <span>222</span>
    <span>333</span>
    <span>444</span>
    <ul>
        <li style="display: block">111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
</div>
</body>
</html>